<!-- HOME -->
<div style="padding: 10px;">

  <!--&nbsp;&nbsp; -->
  <div class="zgzBtn">

    <button nz-button nzType="primary" (click)="open()">配置</button>&nbsp;&nbsp;
    <button nz-button nzType="primary" (click)="canvasImg()">生成截图</button>
  </div>


  <section id="allView" [ngStyle]="{'width': selectedPhoneValue.width+'px',height:selectedPhoneValue.height+'px'}">

    <div *ngIf="selectedPhoneValue.name=='iPhoneX'" class="time iphone">{{hour}}:{{minute}}</div>
    <div *ngIf="selectedPhoneValue.name!='iPhoneX'" class="time"
      [ngStyle]="{'top':selectedPhoneValue.top,'right':selectedPhoneValue.right}">
      {{hour}}:{{minute}}
    </div>
    <img [src]="'./assets/'+selectedPhoneValue.tmpUrl" alt="">

    <div class="title">
      <img src="./assets/jt.png" alt="">
      <div class="font">
        {{imgTitle}}
      </div>
    </div>

    <section *ngFor="let item of watchImg">

      <section *ngIf="!item.isShowAdv">
        <div class="timeCenter" *ngIf="item.isShowTime">{{item.dateTime}}</div>
        <div class="msg">
          <img src="https://qcloud.resource.dev.hygeian.com.cn/wxmock/avatar/aratar_{{item.headImg}}.jpg" alt="">
          <div class="font">
            <p class="p1">{{item.font}}</p>
          </div>
          <div class="iconjt"></div>
          <div style="clear: both;"></div>
        </div>
      </section>

      <section *ngIf="item.isShowAdv">
        <div class="timeCenter" *ngIf="item.isShowTime">{{item.dateTime}}</div>
        <div class="msg">
          <img src="https://qcloud.resource.dev.hygeian.com.cn/wxmock/avatar/aratar_{{setHeadImgUrl}}.jpg" alt="">
          <div class="font">
            <p class="p1">{{advTitle}}</p>
            <div class="p2">
              <p>
                {{advStitle}}
              </p>
              <img [src]="adcImg" alt="">
            </div>
          </div>
          <div class="iconjt"></div>
          <div style="clear: both;"></div>
        </div>
      </section>

    </section>


    <div class="footer">
      <img src="./assets/ft.png" alt="">
    </div>

  </section>
</div>

<div id="contentView">

</div>

<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom': '53px' }"
  [nzMaskClosable]="false" [nzWidth]="720" [nzVisible]="visible" nzTitle="配置" (nzOnClose)="close()">

  <section style="padding: 40px;">
    <form nz-form #setDataForm="ngForm">

      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired>机型</nz-form-label>
        <nz-form-control [nzSpan]="19">
          <nz-select (ngModelChange)="checkPhone($event)" nzPlaceHolder="请选择你的机型" [(ngModel)]="selectedPhoneValue"
            name="PhoneValue">
            <nz-option *ngFor="let item of phoneList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired>群名称</nz-form-label>
        <nz-form-control [nzSpan]="19">
          <input nz-input [(ngModel)]="imgTitle" name="imgTitle" required />
        </nz-form-control>
      </nz-form-item>


      <nz-card nzTitle="活动配置" [nzExtra]="">

        <nz-form-item>
          <nz-form-label [nzSpan]="5">指定发布人</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <button nz-button (click)="showModal()">选择发布人</button>
          </nz-form-control>
        </nz-form-item>


        <nz-form-item>
          <nz-form-label nzRequired [nzSpan]="5">活动标题</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input nz-input required [(ngModel)]="advTitle" placeholder="请输入活动标题" name="advTitle" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzRequired [nzSpan]="5">活动副标题</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input nz-input required [(ngModel)]="advStitle" placeholder="请输入活动标题" name="advStitle" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzRequired [nzSpan]="5">活动图片</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input type="hidden" required [(ngModel)]="adcImg" name="adcImg">
            <input nz-input type="file" (change)="fileChange($event)" />
            <img style="width:140px;height:140px" [src]="adcImg" alt="">
          </nz-form-control>
        </nz-form-item>
      </nz-card>

      <div style="padding:10px 0;"></div>

      <nz-card nzTitle="对话配置" [nzExtra]="extraTemplate">

        <nz-form-item *ngFor="let item of watchList;let i=index">

          <nz-form-label [nzSpan]="5">第{{i+1}}句</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input nz-input required [(ngModel)]="item.font" placeholder="请输入第{{i}}句话" name="infor{{i}}" />
          </nz-form-control>
          <nz-form-control [nzSpan]="5" nzOffset="1">
            <label nz-checkbox [(ngModel)]="item.isShowTime" name="checked{{i}}">对话框上面是否显示时间</label>
          </nz-form-control>
          <nz-form-control [nzSpan]="5" nzOffset="1">
            <label nz-checkbox [(ngModel)]="item.isShowAdv" name="checked2{{i}}">用活动信息替换该句对话</label>
          </nz-form-control>
        </nz-form-item>

      </nz-card>
      <ng-template #extraTemplate>
        <button nz-button (click)="addInfor()">+添加</button>
      </ng-template>

      <div style="padding: 20px;"></div>
      <button nz-button nzType="primary" [disabled]="!setDataForm.form.valid" (click)="inforData()">点击渲染</button>

    </form>

  </section>


</nz-drawer>





<nz-modal [(nzVisible)]="isVisible" nzTitle="选择头像" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">


  <nz-table #basicTable [nzData]="dataSet">
    <thead>
      <tr>
        <th>头像</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>
          <img width="64" src="https://qcloud.resource.dev.hygeian.com.cn/wxmock/avatar/aratar_{{data}}.jpg" alt="">
        </td>
        <td>
          <button nz-button (click)="setHeadImg(data)">选择</button>
        </td>

      </tr>
    </tbody>
  </nz-table>

  <div *nzModalFooter></div>
</nz-modal>